<template>
  <div class="box">
    <el-container>
      <!-- 左侧 -->
      <el-aside :width="data.flag?'80px':'220px'">
        <!-- 头像用户名 -->
        <div class="us">
          <img
            src="https://img0.baidu.com/it/u=2340207365,1954965377&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=624"
            class="img"
          />
          <p v-if="!data.flag">VIP Admin</p>
        </div>
        <!-- 左侧导航 -->
        <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          :default-active="data.name"
          text-color="#fff"
          style="border: 0"
          router
        >
          <el-menu-item :index="'/profile'">
            <User style="width: 18px; margin-right: 15px" />
            <span v-if="!data.flag">个人中心</span>
          </el-menu-item>
          <el-menu-item :index="'/DataVisualization'">
            <el-icon style="width: 18px; margin-right: 15px"
              ><OfficeBuilding
            /></el-icon>
            <span v-if="!data.flag">数据可视化</span>
          </el-menu-item>
          <el-sub-menu index="3">
            <template #title>
              <User style="width: 18px; margin-right: 15px" />
              <span v-if="!data.flag">用户</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/UserList">员工管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/RoleList">角色列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/PermissionsList">权限列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <!-- 没写路由禁止点击 -->
          <el-sub-menu index="4" disabled>
            <template #title>
              <Calendar style="width: 18px; margin-right: 15px" />
              <span v-if="!data.flag">文章</span>
            </template>
            <el-menu-item-group>
              <el-menu-item>文章排名</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item>创建文章</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <!-- 右侧 -->
      <el-container>
        <!-- 右侧头部 -->
        <el-header>
          <!-- 上部分 -->
          <div class="t">
            <div class="tl">
              <el-icon size="28" style="width: 60px" @click="status"><Expand  /></el-icon>
              <el-breadcrumb style="text-align: center">
                <el-breadcrumb-item
                  style="padding: 0 10px"
                  v-for="item in data.routeMeta.title"
                  :to="{
                    path:
                      item == '用户' ? '/UserList' : '/' + data.routeMeta.path,
                  }"
                  >{{ item }}</el-breadcrumb-item
                >
              </el-breadcrumb>
            </div>
            <div class="tr">
              <img
                src="https://img0.baidu.com/it/u=2340207365,1954965377&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=624"
                style="width: 40px; height: 40px"
              />
            </div>
          </div>
          <!-- 下部分 -->
          <div class="t1">
            <div>
              <p v-for="item in data.routes" :key="item.id" :class="data.name==item.name?'bgclor':''" @click="tog(item.path)">
                <span v-if="data.name==item.name" class="y"></span>
                {{ item.title }}
                <span v-if="data.name!=item.name" class="x" @click.stop="x(item.id)">x</span>
              </p>
            </div>
          </div>
        </el-header>
        <!-- 右侧主体部分 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, watch } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import {
  Lock,
  User,
  OfficeBuilding,
  Calendar,
  Expand,
  ArrowRight,
} from "@element-plus/icons-vue";
import { getd } from "../Api/request";
const route = useRoute();
const router=useRouter()
const data = reactive({
  name: "",
  routeMeta: [], //面包屑
  routes: [], //路由历史记录
  flag:false
});
data.routes = JSON.parse(localStorage.getItem("routes")) || [];
// 监听路由信息
watch(
  route,
  (val) => {
    data.name = val.name;
    data.routeMeta = val.meta;
    // 获取当前页面路由地址  /XXX
    data.routeMeta.path = val.path;
    // 获取当前路由对应的导航名 XX列表
    let title = val.meta.title[val.meta.title.length - 1];
    let obj = {
      path: val.path,
      name: val.name,
      id: new Date().getTime(),
      title: title,
    };
    let flag = false;
    data.routes.forEach((item) => {
      if (item.path == obj.path) {
        flag = true;
        return false;
      }
    });
    
    if (flag == false) {
      data.routes.push(obj);
      localStorage.setItem("routes", JSON.stringify(data.routes));
    }
  },
  { deep: true, immediate: true }
);

// 关闭当前页面
const x=(id)=>{
  data.routes.forEach((item,i)=>{
    if(item.id==id){
      data.routes.splice(i,1)
    }
  })
  localStorage.setItem("routes",JSON.stringify(data.routes))
}
const tog=(path)=>{
  router.push(path)
}
const status=()=>{
  data.flag=!data.flag
}


</script>

<style scoped lang='scss'>
.box {
  height: 100%;
}
.el-aside {
  height: 100%;
  background: #545c64;
  overflow: hidden;
}
.el-container {
  height: 100%;
}
.el-header {
  padding: 0;
}
.us {
  display: flex;
  align-items: center;
  color: white;
  justify-content: space-evenly;
  padding: 20px 0;
}
.img {
  width: 50px;
  height: 50px;
}
.el-container {
  width: 100%;
}
.x{
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  border: 1px solid;
  border-radius: 50%;
  margin-left: 8px;
}
.y{
  width: 9px;
  height: 9px;
  display: block;
  border-radius: 50%;
  background: white;
  margin-right: 5px;
}
.bgclor{
  background: #545c64;
  color: white;
}
.t {
  width: 100%;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  .tl {
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    
  }
  .tr {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
.t1 {
  border-bottom: 1px solid #ccc;
  text-indent: 1em;
  padding: 8px 0;
  div{
      display: flex;
      p{
        border: 1px solid;
        padding: 2px 4px;
        text-indent: 0;
        margin: 0 5px;
        display: flex;
        align-items: center;
      }
    }
}
.el-main {
  margin-top: 28px;
}
</style>